<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>支付-学悦网</title>
    <include file="public@head"/>
</head>
<style type="text/css">
    .pw-box-bd {
        margin-bottom: 10px;
        border: 1px solid #ddd;
        width: 298px;
        height: 298px;
    }
    .pw-box-ft {
        color: #ddd;
        height: 62px;
        padding: 8px 0 8px 125px;
        background:url(__TMPL__/public/assets/images/codeinfo.jpg) 50px 8px no-repeat #31549f;
    }

    .p-w-sidebar {
        float: left;
        width: 379px;
        height: 390px;
        padding-left: 100px;
        margin-top: -20px;
        background: url(__TMPL__/public/assets/images/codephone.jpg) 50px 0 no-repeat;
    }
</style>
<body class="body-white" id="top">
<include file="public@nav"/>
<div class="container tc-main">
    <div class="row">
        <div class="fill-in wrap">
            <div style="color:#ff0000;font-size:20px;font-weight: bolder;">订单提交成功，请尽快付款！</div><br/>
            <div style="color:#556B2F;font-size:20px;font-weight: bolder;">订单号：{$out_trade_no}<br/>应付金额：{$pay_total}&nbsp;元</div><br/>
            <input type="hidden" name="order_code" id="order_code" value="{$out_trade_no}">
        </div>
        <if condition="isset($pay_type) && $pay_type eq 'native'">
            <div class="col-md-6 pw-box-bd">
                <img alt="请扫码支付" src="{:url('pay/Wxpay/wxImage')}?data={:urlencode($code_url)}" style="width:298px;height:298px;"/>
                <div class="pw-box-ft">
                    <p>请使用微信扫一扫</p>
                    <p>扫描二维码支付</p>
                </div>
            </div>
            <div class="col-md-6 p-w-sidebar"></div>
        </if>
    </div>
</div>

<include file="public@footer" />
<include file="public@scripts" />

<script type="text/javascript">
    /****************** 公众号支付 ******************/
    function jsApiReady(){
        var data = '{$jsApiParam}';
        data = JSON.parse(data);
        if(data){
            WeixinJSBridge.invoke('getBrandWCPayRequest', data,
                function(res){
                    if(res.err_msg == "get_brand_wcpay_request:ok" ) {
                        /* res.err_msg将在用户支付成功后返回 ok，但并不保证它绝对可靠。*/
                        //由下面检查订单支付成功异步跳转
                    }else{
                        //取消支付
                        alert(res.err_code+res.err_desc+'<br>'+res.err_msg); //显示错误信息
                    }
                }
            );
        }
    }

    if (typeof WeixinJSBridge == "undefined"){
        if( document.addEventListener ){
            document.addEventListener('WeixinJSBridgeReady', jsApiReady, false);
        }else if (document.attachEvent){
            document.attachEvent('WeixinJSBridgeReady', jsApiReady);
            document.attachEvent('onWeixinJSBridgeReady', jsApiReady);
        }
    }else{
        jsApiReady();
    }

    /****************** 支付成功异步跳转 ******************/
    $(function () {
        var orderCode = $("input[name='order_code']").val();
        var my_timer = setInterval(check_order, 2000);

        function check_order(){
            $.ajax({
                type:"post",
                url:"{:url('pay/Wxpay/checkOrder')}",
                dataType:"json",
                data:{"code":orderCode},
                success:function(jsonData){
                    console.log(jsonData);
                    if(jsonData.code == 0){
                        return false;
                    }else{
                        clearInterval(my_timer);
                        alert('支付成功');
                        window.location.href = jsonData.data;
                    }
                },
                error:function(XMLHttpRequest, textStatus, errorThrown){
                    console.log('xhr='+XMLHttpRequest.readyState+' status='+textStatus+' error='+errorThrown);
                }
            });
        }
    });
</script>
</body>
</html>